<template>
	<div class="boxall" style="padding: 0 0.2rem 0.4rem 0.15rem; height: 3.4rem">
		<div class="pos_r">
			<div class="alltitle">日/月订单数</div>
			<div class="pos_a cut_btn dflex">
				<el-button size="mini" class="h100 dflex_vertical_c" :class="{ active: orderCutBtn == '日' }"
					@click="orderDay" round>日</el-button>
				<el-button size="mini" class="h100 dflex_vertical_c" :class="{ active: orderCutBtn == '月' }"
					@click="orderMonth" round>月</el-button>
			</div>
		</div>
		<div class="allnav" id="order"></div>
		<div class="boxfoot"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				orderCutBtn: '日',
				orderDom: null,
				orderOption: []
			};
		},
		methods: {
			async orderDay(isLoading = true) {
				this.orderCutBtn = '日';

				if (isLoading) {
					this.orderDom.showLoading({
						text: '加载中 · · ·',
						color: '#02a6b5',
						textColor: '#fff',
						maskColor: 'rgba(4, 6, 51)'
					});
				}

				const res1 = this.$db['wmzmall-order']
					.collection()
					.groupBy('dateToString(add(new Date(0),create_time),"%Y年%m月%d日","+0800") as time')
					.groupField('count(*) as order_cnt')
					.orderBy('time desc')
					.get();

				const res2 = this.$db['wmzmall-order']
					.collection()
					.where({
						is_delete: 0,
						order_pay_state: '已付款'
					})
					.groupBy('dateToString(add(new Date(0),create_time),"%Y年%m月%d日","+0800") as time')
					.groupField('count(*) as pay_cnt, sum(order_actural_paid) as pay_money')
					.orderBy('time desc')
					.get();

				let res = {
					code: 0,
					datas: []
				};

				let data = {};

				await Promise.all([res1, res2]).then(resData => {
					resData[0].result.data.forEach(x => {
						data = {
							...x,
							...resData[1].result.data.find(p => p.time == x.time)
						};
						res.datas.push(data);
					});
				}).catch(() => {
					if (isLoading) {
						this.orderDom.hideLoading();
					}
				})

				if (isLoading) {
					this.orderDom.hideLoading();
				}

				if (res.datas.length > 0) res.code = 200;

				if (res.code == 200) {
					this.orderOption.xAxis.data = [];
					this.orderOption.series[0].data = [];
					this.orderOption.series[1].data = [];

					let today = new Date();
					let todaystr = today.format('yyyy年MM月dd日');
					for (let i = 30; i >= 0; i--) {
						today = new Date();
						today.setTime(today.getTime() - 1000 * 60 * 60 * 24 * i);
						todaystr = today.format('yyyy年MM月dd日');

						let data = res.datas.find(x => x.time == todaystr) || {};

						this.orderOption.series[0].data.push({
							value: data.order_cnt || 0,
							name: todaystr
						});

						this.orderOption.series[1].data.push({
							value: data.pay_cnt || 0,
							money: (data.pay_money || 0) / 100
						});
						this.orderOption.xAxis.data.push({
							value: today.format('dd'),
							time: todaystr
						});
					}
				}
				this.orderDom.setOption(this.orderOption);
			},
			async orderMonth(isLoading = true) {
				this.orderCutBtn = '月';

				if (isLoading) {
					this.orderDom.showLoading({
						text: '加载中 · · ·',
						color: '#02a6b5',
						textColor: '#fff',
						maskColor: 'rgba(4, 6, 51)'
					});
				}

				const res1 = this.$db['wmzmall-order']
					.collection()
					.groupBy('dateToString(add(new Date(0),create_time),"%Y年%m月","+0800") as time')
					.groupField('count(*) as order_cnt')
					.orderBy('time desc')
					.get();

				const res2 = this.$db['wmzmall-order']
					.collection()
					.where({
						is_delete: 0,
						order_pay_state: '已付款'
					})
					.groupBy('dateToString(add(new Date(0),create_time),"%Y年%m月","+0800") as time')
					.groupField('count(*) as pay_cnt, sum(order_actural_paid) as pay_money')
					.orderBy('time desc')
					.get();

				let res = {
					code: 0,
					datas: []
				};

				let data = {};

				await Promise.all([res1, res2]).then(resData => {
					resData[0].result.data.forEach(x => {
						data = {
							...x,
							...resData[1].result.data.find(p => p.time == x.time)
						};
						res.datas.push(data);
					});
				}).catch(() => {

				}).catch(() => {
					if (isLoading) {
						this.orderDom.hideLoading();
					}
				})

				if (isLoading) {
					this.orderDom.hideLoading();
				}

				if (res.datas.length > 0) res.code = 200;

				if (res.code == 200) {

					this.orderOption.xAxis.data = [];
					this.orderOption.series[0].data = [];
					this.orderOption.series[1].data = [];

					let today = new Date();
					let todaystr = today.format('yyyy年MM月');
					for (let i = 11; i >= 0; i--) {
						today = new Date();
						today.setMonth(today.getMonth() - i);
						todaystr = today.format('yyyy年MM月');

						let data = res.datas.find(x => x.time == todaystr) || {};

						this.orderOption.series[0].data.push({
							value: data.order_cnt || 0,
							name: todaystr
						});

						this.orderOption.series[1].data.push({
							value: data.pay_cnt || 0,
							money: (data.pay_money || 0) / 100
						});
						this.orderOption.xAxis.data.push({
							value: today.format('MM'),
							time: todaystr
						});
					}

					this.orderDom.setOption(this.orderOption);
				}
			},
			orderCharts(callback) {
				this.orderDom = this.$echarts.init(document.getElementById('order'));

				this.orderOption = {
					grid: {
						left: '10',
						top: '30',
						right: '10',
						bottom: '10',
						containLabel: true
					},
					tooltip: {
						trigger: 'axis',
						label: {
							show: true
						},
						formatter: function(params) {
							let str = '';

							str += ' ' + params[0].data.name + '    ' + '\n';
							params.forEach(item => {
								if (item.seriesName === '订单数') {
									str += ' ' + item.seriesName + ' : ' + item.data.value + ' ' + '\n';
								} else if (item.seriesName === '支付数') {
									str += ' ' + item.seriesName + ' : ' + item.data.value + ' ';
								}
							});
							return str;
						}
					},
					legend: {
						top: '0%',
						data: ['订单数', '支付数'],
						textStyle: {
							color: 'rgba(255,255,255,.5)',
							fontSize: '12'
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						axisLabel: {
							color: '#30eee9'
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#397cbc'
							}
						},
						axisTick: {
							show: false
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#195384'
							}
						},
						data: []
					},
					yAxis: [{
						type: 'value',
						name: '',
						axisLabel: {
							formatter: '{value}',
							textStyle: {
								color: '#2ad1d2'
							}
						},
						axisLine: {
							lineStyle: {
								color: '#27b4c2'
							}
						},
						axisTick: {
							show: false
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#11366e'
							}
						}
					}],
					series: [{
							smooth: true,
							name: '订单数',
							type: 'line',
							symbol: 'circle',
							symbolSize: 5,
							showSymbol: false,
							lineStyle: {
								normal: {
									color: '#00d4c7',
									width: 2
								}
							},
							itemStyle: {
								normal: {
									color: '#00d4c7',
									lineStyle: {
										color: '#00d4c7',
										width: 1
									}
								}
							},
							data: []
						},
						{
							smooth: true,
							name: '支付数',
							type: 'line',
							symbol: 'circle',
							symbolSize: 5,
							showSymbol: false,
							lineStyle: {
								normal: {
									color: '#0184d5',
									width: 2
								}
							},
							itemStyle: {
								normal: {
									color: '#0092f6',
									lineStyle: {
										color: '#0092f6',
										width: 1
									}
								}
							},
							markPoint: {
								itemStyle: {
									normal: {
										color: 'red'
									}
								}
							},
							data: []
						}
					]
				};

				window.addEventListener('resize', () => {
					this.orderDom.resize();
				});

				if (typeof callback === 'function') {
					callback();
				}
			}
		},
		mounted() {
			this.orderCharts(() => {
				this.orderDay();
			});
		},
		created() {
			uni.$on('biRefresh', () => {
				if (this.orderCutBtn == '日') {
					this.orderDay(false);
				} else {
					this.orderMonth(false);
				}
			});
		}
	};
</script>

<style></style>
